<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo16-渲染函数-v-model实现</title>
    <!-- 
      很多地方不理解！！！
      隐约摸索到一些线索：render函数使用原生js的能力去创建dom 。
      所以在render函数中不能使用类似 "父组件"中引入"子组件"的编码方式 。。。具体细节还没有研究透

     -->
</head>
<script src="../libs/vue.js"></script>
<style>
    .container{
        width: 100%;
        min-width: 320px;
        max-width: 640px;

        margin:0 auto;
    }
</style>
<body> 
    <div id="app">
      <my-heading>
      </my-heading>
    </div>
</body>

<script>


/**
 * 如果你真的需要重复很多次的元素/组件，你可以使用【工厂函数】来实现。
 * 
 * 例如，下面这渲染函数用完全合法的方式渲染了 20 个相同的段落：
 *  
 * 不懂！工厂函数  ！！！
 */ 
Vue.component('my-heading', {
  props: ['value'],
render: function (createElement) {
  var self = this;
  self.value = 'asdfasdfasdf'

  var sp = createElement('span', self.value ); 

  var ipt = createElement('input', {
    domProps: {
      value: self.value
    },
    on: {
      input: function (event) {
        self.$emit('input', event.target.value); 
      }
    }
  });

  
  var div = createElement('div',[ipt,sp]);

  return div ;
}
});




var app = new Vue({
  el: '#app'
});
</script>
</html>